<template>
  <div class="dashboard-container">
    <!-- 仪表盘头部 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="welcome-section">
          <div class="avatar-section">
            <el-avatar :size="60" class="user-avatar">
              <el-icon><User /></el-icon>
            </el-avatar>
          </div>
          <div class="welcome-text">
            <h1>欢迎回来，{{ username }}！</h1>
            <p class="welcome-subtitle">{{ getCurrentGreeting() }}</p>
            <div class="last-login">
              <el-icon><Clock /></el-icon>
              <span>上次登录：{{ lastLoginTime }}</span>
            </div>
          </div>
        </div>

        <div class="header-stats">
          <div class="stat-item">
            <div class="stat-value">{{ stats.totalFiles }}</div>
            <div class="stat-label">文件总数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ formatSize(stats.usedStorage) }}</div>
            <div class="stat-label">已用空间</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ stats.todayUploads }}</div>
            <div class="stat-label">今日上传</div>
          </div>
        </div>

        <div class="quick-actions">
          <el-button type="primary" size="large" @click="$router.push('/fileupload')" class="action-btn">
            <el-icon><Upload /></el-icon>
            上传文件
          </el-button>
          <el-button type="success" size="large" @click="$router.push('/new')" class="action-btn">
            <el-icon><FolderAdd /></el-icon>
            新建文件夹
          </el-button>
        </div>
      </div>
    </div>

    <!-- 数据概览卡片 -->
    <div class="overview-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="overview-card files-card">
            <div class="card-content">
              <div class="card-icon">
                <el-icon><Document /></el-icon>
              </div>
              <div class="card-info">
                <div class="card-number">{{ stats.totalFiles }}</div>
                <div class="card-label">总文件数</div>
                <div class="card-trend" :class="{ positive: stats.filesGrowth > 0 }">
                  <el-icon><TrendCharts /></el-icon>
                  <span>{{ stats.filesGrowth > 0 ? '+' : '' }}{{ stats.filesGrowth }}%</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="overview-card folders-card">
            <div class="card-content">
              <div class="card-icon">
                <el-icon><Folder /></el-icon>
              </div>
              <div class="card-info">
                <div class="card-number">{{ stats.totalFolders }}</div>
                <div class="card-label">文件夹数</div>
                <div class="card-trend" :class="{ positive: stats.foldersGrowth > 0 }">
                  <el-icon><TrendCharts /></el-icon>
                  <span>{{ stats.foldersGrowth > 0 ? '+' : '' }}{{ stats.foldersGrowth }}%</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="overview-card storage-card">
            <div class="card-content">
              <div class="card-icon">
                <el-icon><Coin /></el-icon>
              </div>
              <div class="card-info">
                <div class="card-number">{{ formatSize(stats.usedStorage) }}</div>
                <div class="card-label">已用空间</div>
                <div class="storage-progress">
                  <el-progress
                    :percentage="storagePercentage"
                    :stroke-width="6"
                    :show-text="false"
                    :color="getStorageColor(storagePercentage)"
                  />
                  <span class="progress-text">{{ storagePercentage }}% 已使用</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="overview-card activity-card">
            <div class="card-content">
              <div class="card-icon">
                <el-icon><DataAnalysis /></el-icon>
              </div>
              <div class="card-info">
                <div class="card-number">{{ stats.todayActivity }}</div>
                <div class="card-label">今日活动</div>
                <div class="activity-types">
                  <span class="activity-item">
                    <el-icon><Upload /></el-icon>
                    {{ stats.todayUploads }}
                  </span>
                  <span class="activity-item">
                    <el-icon><Download /></el-icon>
                    {{ stats.todayDownloads }}
                  </span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 存储分析和文件类型分布 -->
    <div class="analytics-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <h3>存储使用情况</h3>
                <el-button type="text" @click="refreshData">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </div>
            </template>

            <div class="storage-breakdown">
              <div class="storage-item" v-for="item in storageBreakdown" :key="item.type">
                <div class="storage-type">
                  <div class="type-icon" :style="{ backgroundColor: item.color }">
                    {{ item.icon }}
                  </div>
                  <div class="type-info">
                    <div class="type-name">{{ item.name }}</div>
                    <div class="type-size">{{ formatSize(item.size) }}</div>
                  </div>
                </div>
                <div class="storage-bar">
                  <div class="bar-bg">
                    <div
                      class="bar-fill"
                      :style="{
                        width: `${(item.size / stats.usedStorage * 100)}%`,
                        backgroundColor: item.color
                      }"
                    ></div>
                  </div>
                  <span class="percentage">{{ ((item.size / stats.usedStorage) * 100).toFixed(1) }}%</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <h3>最近活动</h3>
                <el-select v-model="activityPeriod" size="small" style="width: 100px;">
                  <el-option label="今天" value="today" />
                  <el-option label="本周" value="week" />
                  <el-option label="本月" value="month" />
                </el-select>
              </div>
            </template>

            <div class="activity-timeline">
              <div
                v-for="activity in recentActivities"
                :key="activity.id"
                class="activity-item-timeline"
              >
                <div class="activity-icon" :class="activity.type">
                  <el-icon v-if="activity.type === 'upload'"><Upload /></el-icon>
                  <el-icon v-else-if="activity.type === 'download'"><Download /></el-icon>
                  <el-icon v-else-if="activity.type === 'share'"><Share /></el-icon>
                  <el-icon v-else><Edit /></el-icon>
                </div>
                <div class="activity-content">
                  <div class="activity-title">{{ activity.title }}</div>
                  <div class="activity-desc">{{ activity.description }}</div>
                  <div class="activity-time">{{ formatActivityTime(activity.time) }}</div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 最近文件和快捷操作 -->
    <div class="content-section">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-card class="recent-files-card">
            <template #header>
              <div class="card-header">
                <h3>最近文件</h3>
                <div class="header-actions">
                  <el-button type="text" @click="$router.push('/files')">
                    查看全部
                    <el-icon><ArrowRight /></el-icon>
                  </el-button>
                </div>
              </div>
            </template>

            <div v-if="recentFiles.length === 0" class="empty-state">
              <el-empty description="暂无最近文件" :image-size="80">
                <el-button type="primary" @click="$router.push('/fileupload')">
                  <el-icon><Upload /></el-icon>
                  立即上传
                </el-button>
              </el-empty>
            </div>

            <div v-else class="recent-files-list">
              <div
                v-for="file in recentFiles"
                :key="file.id"
                class="file-item-modern"
                @click="handleFileClick(file)"
              >
                <div class="file-preview">
                  <div class="file-icon-modern" :class="getFileTypeClass(file.type)">
                    <el-icon v-if="isImage(file.type)"><Picture /></el-icon>
                    <el-icon v-else-if="isVideo(file.type)"><VideoPlay /></el-icon>
                    <el-icon v-else-if="isAudio(file.type)"><Microphone /></el-icon>
                    <el-icon v-else-if="isDocument(file.type)"><Document /></el-icon>
                    <el-icon v-else><Files /></el-icon>
                  </div>
                </div>

                <div class="file-details">
                  <div class="file-name-modern" :title="file.filename">{{ file.filename }}</div>
                  <div class="file-meta-modern">
                    <span class="file-size">{{ formatSize(file.size * 1024 * 1024) }}</span>
                    <span class="file-date">{{ formatDate(file.created_at) }}</span>
                  </div>
                  <div class="file-tags">
                    <el-tag size="small" :type="getFileTagType(file.type)">
                      {{ getFileTypeName(file.type) }}
                    </el-tag>
                  </div>
                </div>

                <div class="file-actions-modern">
                  <el-button type="text" size="small" @click.stop="previewFile(file)">
                    <el-icon><View /></el-icon>
                  </el-button>
                  <el-button type="text" size="small" @click.stop="downloadFile(file)">
                    <el-icon><Download /></el-icon>
                  </el-button>
                  <el-button type="text" size="small" @click.stop="shareFile(file)">
                    <el-icon><Share /></el-icon>
                  </el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <div class="sidebar-cards">
            <!-- 快捷操作 -->
            <el-card class="quick-actions-card">
              <template #header>
                <h3>快捷操作</h3>
              </template>

              <div class="quick-actions-grid">
                <div class="action-item" @click="$router.push('/fileupload')">
                  <div class="action-icon upload">
                    <el-icon><Upload /></el-icon>
                  </div>
                  <div class="action-text">
                    <div class="action-title">上传文件</div>
                    <div class="action-desc">添加新文件到网盘</div>
                  </div>
                </div>

                <div class="action-item" @click="$router.push('/new')">
                  <div class="action-icon folder">
                    <el-icon><FolderAdd /></el-icon>
                  </div>
                  <div class="action-text">
                    <div class="action-title">新建文件夹</div>
                    <div class="action-desc">创建文件夹整理文件</div>
                  </div>
                </div>

                <div class="action-item" @click="$router.push('/share')">
                  <div class="action-icon share">
                    <el-icon><Share /></el-icon>
                  </div>
                  <div class="action-text">
                    <div class="action-title">我的分享</div>
                    <div class="action-desc">管理分享的文件</div>
                  </div>
                </div>

                <div class="action-item" @click="$router.push('/recycle')">
                  <div class="action-icon recycle">
                    <el-icon><Delete /></el-icon>
                  </div>
                  <div class="action-text">
                    <div class="action-title">回收站</div>
                    <div class="action-desc">查看已删除的文件</div>
                  </div>
                </div>
              </div>
            </el-card>

            <!-- 文件类型快捷入口 -->
            <el-card class="file-types-card">
              <template #header>
                <h3>文件分类</h3>
              </template>

              <div class="file-types-grid">
                <div class="type-item" @click="$router.push('/myfile/pic')">
                  <div class="type-icon images">
                    <el-icon><Picture /></el-icon>
                  </div>
                  <div class="type-info">
                    <div class="type-name">图片</div>
                    <div class="type-count">{{ stats.imageFiles }} 个文件</div>
                  </div>
                </div>

                <div class="type-item" @click="$router.push('/myfile/videos')">
                  <div class="type-icon videos">
                    <el-icon><VideoPlay /></el-icon>
                  </div>
                  <div class="type-info">
                    <div class="type-name">视频</div>
                    <div class="type-count">{{ stats.videoFiles }} 个文件</div>
                  </div>
                </div>

                <div class="type-item" @click="$router.push('/myfile/audio')">
                  <div class="type-icon audios">
                    <el-icon><Microphone /></el-icon>
                  </div>
                  <div class="type-info">
                    <div class="type-name">音频</div>
                    <div class="type-count">{{ stats.audioFiles }} 个文件</div>
                  </div>
                </div>

                <div class="type-item" @click="$router.push('/myfile/doc')">
                  <div class="type-icon documents">
                    <el-icon><Document /></el-icon>
                  </div>
                  <div class="type-info">
                    <div class="type-name">文档</div>
                    <div class="type-count">{{ stats.documentFiles }} 个文件</div>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  User,
  Clock,
  Upload,
  FolderAdd,
  Document,
  Folder,
  Coin,
  DataAnalysis,
  Download,
  TrendCharts,
  Refresh,
  Share,
  Edit,
  ArrowRight,
  Picture,
  VideoPlay,
  Microphone,
  Files,
  View,
  Delete
} from "@element-plus/icons-vue";
import { fileListApi, downloadApi, getFolderApi } from "@/utils/api";

const router = useRouter();

// 响应式数据
const username = ref(localStorage.getItem("username") || "用户");
const lastLoginTime = ref(new Date().toLocaleString());
const activityPeriod = ref("today");

const stats = ref({
  totalFiles: 0,
  totalFolders: 0,
  usedStorage: 0,
  imageFiles: 0,
  videoFiles: 0,
  audioFiles: 0,
  documentFiles: 0,
  todayUploads: 0,
  todayDownloads: 0,
  todayActivity: 0,
  filesGrowth: 12.5,
  foldersGrowth: 8.3
});

const recentFiles = ref([]);
const recentActivities = ref([
  {
    id: 1,
    type: 'upload',
    title: '上传了新文件',
    description: 'document.pdf',
    time: new Date(Date.now() - 1000 * 60 * 30) // 30分钟前
  },
  {
    id: 2,
    type: 'share',
    title: '分享了文件',
    description: 'presentation.pptx',
    time: new Date(Date.now() - 1000 * 60 * 60 * 2) // 2小时前
  },
  {
    id: 3,
    type: 'download',
    title: '下载了文件',
    description: 'image.jpg',
    time: new Date(Date.now() - 1000 * 60 * 60 * 5) // 5小时前
  }
]);

// 计算属性
const storagePercentage = computed(() => {
  const totalStorage = 10 * 1024 * 1024 * 1024; // 假设总容量10GB
  return Math.min(Math.round((stats.value.usedStorage / totalStorage) * 100), 100);
});

const storageBreakdown = computed(() => [
  {
    type: 'images',
    name: '图片',
    icon: '🖼️',
    color: '#67c23a',
    size: stats.value.usedStorage * 0.4
  },
  {
    type: 'videos',
    name: '视频',
    icon: '🎬',
    color: '#409eff',
    size: stats.value.usedStorage * 0.3
  },
  {
    type: 'documents',
    name: '文档',
    icon: '📄',
    color: '#e6a23c',
    size: stats.value.usedStorage * 0.2
  },
  {
    type: 'others',
    name: '其他',
    icon: '📁',
    color: '#909399',
    size: stats.value.usedStorage * 0.1
  }
]);

// 判断登录状态
const token = localStorage.getItem("token");
if (!token) {
  router.push({ path: "/login" });
}

// 方法
const getCurrentGreeting = () => {
  const hour = new Date().getHours();
  if (hour < 12) return "早上好！今天也要加油哦 ✨";
  if (hour < 18) return "下午好！工作辛苦了 ☀️";
  return "晚上好！注意休息哦 🌙";
};

const getStorageColor = (percentage) => {
  if (percentage < 50) return '#67c23a';
  if (percentage < 80) return '#e6a23c';
  return '#f56c6c';
};

// 获取统计数据
const fetchStats = async () => {
  try {
    const id = localStorage.getItem("id");

    // 获取文件数据
    const fileResponse = await fileListApi({ user_id: id });
    if (fileResponse && Array.isArray(fileResponse)) {
      const files = fileResponse;

      stats.value.totalFiles = files.length;
      stats.value.usedStorage = files.reduce((total, file) => total + (file.size || 0), 0) * 1024 * 1024;
      stats.value.imageFiles = files.filter(file => isImage(file.type)).length;
      stats.value.videoFiles = files.filter(file => isVideo(file.type)).length;
      stats.value.audioFiles = files.filter(file => isAudio(file.type)).length;
      stats.value.documentFiles = files.filter(file => isDocument(file.type)).length;

      // 模拟今日活动数据
      stats.value.todayUploads = Math.floor(Math.random() * 10);
      stats.value.todayDownloads = Math.floor(Math.random() * 15);
      stats.value.todayActivity = stats.value.todayUploads + stats.value.todayDownloads;

      // 获取最近的6个文件
      recentFiles.value = files
        .sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
        .slice(0, 6);
    }

    // 获取文件夹数据
    const folderResponse = await getFolderApi({ id });
    if (folderResponse.code === 200) {
      stats.value.totalFolders = folderResponse.data.data.length;
    }
  } catch (error) {
    console.error("获取统计数据失败:", error);
  }
};

const refreshData = () => {
  fetchStats();
  ElMessage.success("数据已刷新");
};

// 文件类型判断
const isImage = (type) => type && type.startsWith('image/');
const isVideo = (type) => type && type.startsWith('video/');
const isAudio = (type) => type && type.startsWith('audio/');
const isDocument = (type) => {
  if (!type) return false;
  return type.includes('pdf') || type.includes('doc') || type.includes('text');
};

// 获取文件类型样式类
const getFileTypeClass = (type) => {
  if (isImage(type)) return 'file-image';
  if (isVideo(type)) return 'file-video';
  if (isAudio(type)) return 'file-audio';
  if (isDocument(type)) return 'file-document';
  return 'file-other';
};

// 获取文件类型名称
const getFileTypeName = (type) => {
  if (isImage(type)) return '图片';
  if (isVideo(type)) return '视频';
  if (isAudio(type)) return '音频';
  if (isDocument(type)) return '文档';
  return '其他';
};

// 获取文件标签类型
const getFileTagType = (type) => {
  if (isImage(type)) return 'success';
  if (isVideo(type)) return 'primary';
  if (isAudio(type)) return 'warning';
  if (isDocument(type)) return 'info';
  return '';
};

// 获取文件图标
const getFileIcon = (type) => {
  if (isImage(type)) return '🖼️';
  if (isVideo(type)) return '🎬';
  if (isAudio(type)) return '🎵';
  if (isDocument(type)) return '📄';
  return '📁';
};

// 格式化文件大小
const formatSize = (bytes) => {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  const now = new Date();
  const diff = now - date;
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));

  if (days === 0) return '今天';
  if (days === 1) return '昨天';
  if (days < 7) return `${days}天前`;
  return date.toLocaleDateString();
};

// 格式化活动时间
const formatActivityTime = (time) => {
  const now = new Date();
  const diff = now - time;
  const minutes = Math.floor(diff / (1000 * 60));
  const hours = Math.floor(diff / (1000 * 60 * 60));

  if (minutes < 1) return '刚刚';
  if (minutes < 60) return `${minutes}分钟前`;
  if (hours < 24) return `${hours}小时前`;
  return time.toLocaleDateString();
};

// 处理文件点击
const handleFileClick = (file) => {
  if (isImage(file.type)) {
    router.push('/myfile/pic');
  } else if (isVideo(file.type)) {
    router.push('/myfile/videos');
  } else if (isAudio(file.type)) {
    router.push('/myfile/audio');
  } else {
    router.push('/myfile/doc');
  }
};

// 预览文件
const previewFile = (file) => {
  const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000';
  const username = localStorage.getItem('username');
  const previewUrl = `${baseUrl}/${username}/${file.relativeFilePath}`;
  window.open(previewUrl, '_blank');
};

// 分享文件
const shareFile = (file) => {
  ElMessage.info('分享功能开发中...');
  // 这里可以调用分享API
};

// 下载文件
const downloadFile = (file) => {
  const username = localStorage.getItem("username");
  downloadApi(username, { id: file.id }).then((res) => {
    const blob = new Blob([res], { type: file.type });
    const link = document.createElement("a");
    link.href = window.URL.createObjectURL(blob);
    link.download = file.filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(link.href);
    ElMessage.success('下载成功');
  }).catch((error) => {
    console.error('下载失败:', error);
    ElMessage.error('下载失败');
  });
};

// 初始化
onMounted(() => {
  fetchStats();
});
</script>

<style lang="less" scoped>
.dashboard-container {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
  background: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.dashboard-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 24px;
  color: white;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;

    .welcome-section {
      display: flex;
      align-items: center;
      gap: 20px;

      .avatar-section {
        .user-avatar {
          background: rgba(255, 255, 255, 0.2);
          color: white;
          font-size: 24px;
        }
      }

      .welcome-text {
        h1 {
          font-size: 28px;
          margin: 0 0 8px 0;
          font-weight: 600;
        }

        .welcome-subtitle {
          font-size: 16px;
          margin: 0 0 8px 0;
          opacity: 0.9;
        }

        .last-login {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 14px;
          opacity: 0.8;
        }
      }
    }

    .header-stats {
      display: flex;
      gap: 30px;

      .stat-item {
        text-align: center;

        .stat-value {
          font-size: 24px;
          font-weight: 600;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          opacity: 0.8;
        }
      }
    }

    .quick-actions {
      display: flex;
      gap: 12px;

      .action-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        border-radius: 8px;
        font-weight: 500;
      }
    }
  }
}

.overview-section {
  margin-bottom: 24px;

  .overview-card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

    &.files-card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }

    &.folders-card {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      color: white;
    }

    &.storage-card {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      color: white;
    }

    &.activity-card {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      color: white;
    }

    .card-content {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 24px;

      .card-icon {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .card-info {
        flex: 1;

        .card-number {
          font-size: 28px;
          font-weight: 700;
          margin-bottom: 4px;
          line-height: 1;
        }

        .card-label {
          font-size: 14px;
          opacity: 0.9;
          margin-bottom: 8px;
        }

        .card-trend {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
          opacity: 0.8;

          &.positive {
            color: #67c23a;
          }
        }

        .storage-progress {
          .progress-text {
            font-size: 12px;
            opacity: 0.8;
            margin-top: 4px;
            display: block;
          }
        }

        .activity-types {
          display: flex;
          gap: 12px;

          .activity-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            opacity: 0.8;
          }
        }
      }
    }
  }
}

.analytics-section {
  margin-bottom: 24px;

  .chart-card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
    }

    .storage-breakdown {
      .storage-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;

        .storage-type {
          display: flex;
          align-items: center;
          gap: 12px;

          .type-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: white;
          }

          .type-info {
            .type-name {
              font-weight: 500;
              color: #303133;
              margin-bottom: 2px;
            }

            .type-size {
              font-size: 12px;
              color: #909399;
            }
          }
        }

        .storage-bar {
          display: flex;
          align-items: center;
          gap: 8px;

          .bar-bg {
            width: 80px;
            height: 6px;
            background: #f5f7fa;
            border-radius: 3px;
            overflow: hidden;

            .bar-fill {
              height: 100%;
              border-radius: 3px;
              transition: width 0.3s ease;
            }
          }

          .percentage {
            font-size: 12px;
            color: #909399;
            min-width: 35px;
          }
        }
      }
    }

    .activity-timeline {
      max-height: 300px;
      overflow-y: auto;

      .activity-item-timeline {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;

        .activity-icon {
          width: 32px;
          height: 32px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          color: white;

          &.upload {
            background: #67c23a;
          }

          &.download {
            background: #409eff;
          }

          &.share {
            background: #e6a23c;
          }

          &.edit {
            background: #f56c6c;
          }
        }

        .activity-content {
          flex: 1;

          .activity-title {
            font-weight: 500;
            color: #303133;
            margin-bottom: 2px;
          }

          .activity-desc {
            font-size: 12px;
            color: #606266;
            margin-bottom: 4px;
          }

          .activity-time {
            font-size: 11px;
            color: #909399;
          }
        }
      }
    }
  }
}

.content-section {
  margin-bottom: 24px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }
  }
  
  .recent-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    
    .file-item {
      display: flex;
      align-items: center;
      padding: 15px;
      border: 1px solid #ebeef5;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        border-color: #409eff;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
      }
      
      .file-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: #f5f7fa;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        font-size: 20px;
      }
      
      .file-info {
        flex: 1;
        min-width: 0;
        
        .file-name {
          font-weight: 500;
          color: #303133;
          margin-bottom: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .file-meta {
          display: flex;
          gap: 10px;
          font-size: 12px;
          color: #909399;
        }
      }
      
      .file-actions {
        opacity: 0;
        transition: opacity 0.3s;
      }
      
      &:hover .file-actions {
        opacity: 1;
      }
    }
  }
  
  .shortcut-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      border-color: #409eff;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
    }
    
    .shortcut-icon {
      width: 60px;
      height: 60px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      background: #f5f7fa;
      margin-bottom: 10px;
    }
    
    .shortcut-label {
      font-size: 14px;
      font-weight: 500;
      color: #303133;
    }
  }
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
}

.content-section {
  .recent-files-list {
    .file-item-modern {
      display: flex;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #f5f7fa;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: #f8f9fa;
        transform: translateX(4px);
      }

      &:last-child {
        border-bottom: none;
      }

      .file-preview {
        margin-right: 16px;

        .file-icon-modern {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: white;

          &.file-image {
            background: linear-gradient(135deg, #67c23a, #85ce61);
          }

          &.file-video {
            background: linear-gradient(135deg, #409eff, #66b1ff);
          }

          &.file-audio {
            background: linear-gradient(135deg, #e6a23c, #ebb563);
          }

          &.file-document {
            background: linear-gradient(135deg, #f56c6c, #f78989);
          }

          &.file-other {
            background: linear-gradient(135deg, #909399, #a6a9ad);
          }
        }
      }

      .file-details {
        flex: 1;
        min-width: 0;

        .file-name-modern {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 6px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .file-meta-modern {
          display: flex;
          gap: 12px;
          font-size: 12px;
          color: #909399;
          margin-bottom: 6px;
        }

        .file-tags {
          .el-tag {
            font-size: 11px;
            height: 20px;
            line-height: 18px;
          }
        }
      }

      .file-actions-modern {
        display: flex;
        gap: 4px;
        opacity: 0;
        transition: opacity 0.3s ease;

        .el-button {
          width: 28px;
          height: 28px;
          padding: 0;
          border-radius: 6px;
        }
      }

      &:hover .file-actions-modern {
        opacity: 1;
      }
    }
  }

  .sidebar-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .quick-actions-card,
    .file-types-card {
      border-radius: 16px;
      border: none;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .quick-actions-grid {
      .action-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 12px;

        &:hover {
          background: #f8f9fa;
          transform: translateX(4px);
        }

        &:last-child {
          margin-bottom: 0;
        }

        .action-icon {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          color: white;

          &.upload {
            background: linear-gradient(135deg, #67c23a, #85ce61);
          }

          &.folder {
            background: linear-gradient(135deg, #409eff, #66b1ff);
          }

          &.share {
            background: linear-gradient(135deg, #e6a23c, #ebb563);
          }

          &.recycle {
            background: linear-gradient(135deg, #f56c6c, #f78989);
          }
        }

        .action-text {
          .action-title {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            margin-bottom: 2px;
          }

          .action-desc {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }

    .file-types-grid {
      .type-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 8px;

        &:hover {
          background: #f8f9fa;
        }

        &:last-child {
          margin-bottom: 0;
        }

        .type-icon {
          width: 32px;
          height: 32px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          color: white;

          &.images {
            background: #67c23a;
          }

          &.videos {
            background: #409eff;
          }

          &.audios {
            background: #e6a23c;
          }

          &.documents {
            background: #f56c6c;
          }
        }

        .type-info {
          .type-name {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            margin-bottom: 2px;
          }

          .type-count {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 15px;
  }

  .dashboard-header {
    padding: 20px;

    .header-content {
      flex-direction: column;
      gap: 20px;
      text-align: center;

      .welcome-section {
        flex-direction: column;
        gap: 12px;
      }

      .header-stats {
        gap: 20px;
      }

      .quick-actions {
        justify-content: center;
        flex-wrap: wrap;
      }
    }
  }

  .overview-section {
    .el-col {
      margin-bottom: 16px;
    }
  }

  .analytics-section {
    .el-col {
      margin-bottom: 20px;
    }
  }

  .content-section {
    .el-col {
      margin-bottom: 20px;
    }

    .sidebar-cards {
      gap: 16px;
    }
  }
}
</style>
